<template>
	<view style="width: 100%">
		<input
			v-if="props.type != 'textarea'"
			class="textInput"
			:maxlength="props.maxlength"
			:type="props.type"
			:placeholder="props.placeholder"
			:value="props.isArray ? props.modelValue[0] : props.modelValue"
			@input="onChange"
		/>
		<textarea
			auto-height
			v-else
			class="textInput textarea"
			:maxlength="props.maxlength"
			:placeholder="props.placeholder"
			:value="props.isArray ? props.modelValue[0] : props.modelValue"
			@input="onChange"
		></textarea>
	</view>
</template>

<script setup lang="ts">
	import {PropType} from 'vue';
	const props = defineProps({
		modelValue: {
			type: [Array, String],
			default: () => [],
		},
		isArray: {
			type: Boolean,
			default: () => true,
		},
		placeholder: {
			type: String,
			default: () => '请输入内容',
		},
		maxlength: {
			type: Number,
			default: () => 100,
		},
		type: {
			type: String as PropType<
				| 'text'
				| 'number'
				| 'idcard'
				| 'digit'
				| 'tel'
				| 'safe-password'
				| 'nickname'
				| 'textarea'
			>,
			default: () => 'text',
		},
	});
	const emit = defineEmits(['update:modelValue']);
	const onChange = (e) => {
		emit(
			'update:modelValue',
			props.isArray ? [e.detail.value] : e.detail.value,
		);
	};
</script>

<style lang="scss" scoped>
	.textInput {
		font-size: 0.875rem;
		border: 2rpx solid #e5e5e5;
		box-sizing: border-box;
		border-radius: 0.25rem;
		padding: 0 20rpx;
		width: 100%;
		height: 70rpx;
	}
	.textarea {
		height: 60rpx;
		padding: 14rpx;
		min-height: 60rpx;
	}

	::v-deep.uni-checkbox-input {
		border-radius: 100%;
		background-color: #fff;
		svg {
			color: #fff;
			path {
				fill: #fff;
			}
		}
	}
	.checked {
		::v-deep.uni-checkbox-input {
			background-color: #007aff;
		}
	}
</style>
